<template>
  <el-dialog title="更换车辆" :visible.sync="dialogVisible" :before-close="handleClose" width="700px">
    <div style="display: flex;gap:20px;flex-wrap: wrap;">
      <div :class="{multiple:multipleArr.find(obj=>obj.id ===item.id)}" style="padding: 4px;" @click="handleSubmit(item)" :key="item.id" v-for="item in carData[carType]">
        <car status="orangecar" :carInfo="item" />
      </div>
    </div>
    <span slot="footer" class="dialog-footer" v-if="this.multiple">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="multipleSubmit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {
  scheduling
} from "@/api/service/production/dispatchDesk";
import Car from "@/components/Car"
export default {
  components: {
    Car
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    carType: {
      type: String,
      default: 'tongPre'
    },
    multiple:{
      type:Boolean,
      default:false
    },
    echoData:{
      type:[Object,Array],
    }
  },
  data() {
    return {
      carData: {
        bengPre: [],
        tongPre: []
      },
      multipleArr:[],
    };
  },
  watch:{
    echoData:{
      handler(newVal){
        if (newVal) {
          if (newVal.length && this.multiple==true) {
            this.multipleArr = newVal
          }
        }
      },
      deep:true,
      immediate:true
    }
  },
  methods: {
    async getCar() {
      const res = await scheduling()
      this.carData.bengPre = res.data.preScheduling
        .filter((item) => item.carType.includes("泵车"));
      this.carData.tongPre = res.data.preScheduling
        .filter((item) => item.carType.includes("砼车"));
    },
    deteleItem(index) {
      this.selectMains.splice(index, 1)
    },
    addItem(row) {
      if (this.ids.includes(row.id)) {
        this.$message.error('改标号已被添加!');
      } else {
        this.selectMains.push(row)
      }
    },
    handleClick(e) {
      this.getList()
    },
    handleCurrentChange(row) {
      this.rowData = row
    },
    handleSelect(selection, row) {
      this.rowData = row
      // 清除 所有勾选项
      this.$refs.multipleTable.clearSelection();
      // 当表格数据都没有被勾选的时候 就返回
      // 主要用于将当前勾选的表格状态清除
      if (selection.length == 0) return;
      this.$refs.multipleTable.toggleRowSelection(row, true);
    },
    handleSubmit(row) {
      if (this.multiple) {
        const index = this.multipleArr.findIndex((item) => item.id === row.id);
        if (index !== -1) {
          this.multipleArr.splice(index, 1)
        }else{
          this.multipleArr.push(row)
        }
        return
      }
      this.$emit("onSubmit", row);
      this.handleClose();
    },
    multipleSubmit(){
      this.$emit("onSubmit", this.multipleArr);
      this.handleClose();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    handleClose() {
      this.$emit("onClose");
    },
    handleQuery() {
      this.getList();
    },
    getList() {
      this.loading = true;
      listContract(this.queryParams).then((res) => {
        this.nameList = res.rows;
        this.total = res.total;
        this.loading = false;
      });
    },
  },
  watch: {
    dialogVisible(newValue, oldValue) {
      if (newValue) {
        this.getCar();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.multiple{
  background-color: #ccc;
  border-radius: 2px;
}
</style>
